<template>
  <div
    class="result-con"
    :class="[chainType == 'chain' ? 'chain-result-con' : '']"
  >
    <div class="result-total" v-if="!loading && resultData.length > 0">
      找到约{{ numFormat(total) }}条相关结果
    </div>
    <div v-else class="result-total">{{ emptyText }}</div>
    <!-- 结果列表 -->
    <vue-scroll
      :ops="scrollOps"
      class="scroll-ul"
      v-if="!loading && resultData.length > 0"
    >
      <ul class="ul">
        <li v-for="(item, index) in resultData" :key="index">
          <div class="li-title">
            <h2 class="name" @click="goDetail(item.name)">
              <p>
                <i class="iconfont icon-qiye"></i>
                <span v-html="`${item.name_wordlight}`"></span>
              </p>
            </h2>
            <span class="li-button">
              <!-- 收藏 -->
              <el-tooltip
                :content="!item.isCollection ? '收藏' : '取消收藏'"
                placement="top"
              >
                <a
                  class="collect"
                  :class="{
                    'el-icon-star-on': item.isCollection,
                    'el-icon-star-off': !item.isCollection,
                  }"
                  @click="handleCollect(item, index)"
                ></a>
              </el-tooltip>
              <!-- 科创指数 -->
              <el-tooltip
                class="item"
                effect="dark"
                content="科创指数"
                placement="top"
              >
                <a class="score">
                  <i class="iconfont">&#xe6f8;</i> {{ item.pingfen }}分
                </a>
              </el-tooltip>
            </span>
          </div>
          <div class="li-content">
            <div class="img">
              <img
                v-if="item.logImg && item.logImg !== 'none'"
                :src="item.logImg"
              />
              <img v-else src="@/assets/img/default.png" />
            </div>
            <div class="content">
              <div class="content-label">
                <span v-for="(i, index) in item.label" :key="index">
                  {{ i }}
                </span>
              </div>
              <ul class="content-info">
                <li>
                  <span class="icon"><i class="iconfont">&#xe66d;</i></span>
                  <span class="info-title">法定代表人:</span>
                  <a
                    :title="
                      item._source && item._source.oper_name
                        ? item._source.oper_name
                        : '-'
                    "
                    >{{
                      item._source && item._source.oper_name
                        ? item._source.oper_name
                        : "-"
                    }}</a
                  >
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe7b3;</i></span>
                  <span class="info-title">注册资金:</span>
                  <a
                    :title="
                      item._source && item['_source'].regist_capi
                        ? numFormat(item._source.regist_capi)
                        : ''
                    "
                    >{{
                      item._source && item["_source"].regist_capi
                        ? numFormat(item._source.regist_capi)
                        : "-"
                    }}</a
                  >
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe614;</i></span>
                  <span class="info-title">成立时间:</span>
                  <a
                    :title="
                      item._source && item['_source'].start_date
                        ? item['_source'].start_date
                        : '-'
                    "
                    >{{
                      item._source && item["_source"].start_date
                        ? item["_source"].start_date
                        : "-"
                    }}</a
                  >
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe60c;</i></span>
                  <span class="info-title">注册地址:</span>
                  <a :title="item.address ? item.address : ''">{{
                    item.address ? item.address : "-"
                  }}</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </vue-scroll>
    <el-pagination
      background
      v-if="!loading && resultData.length > 0"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      class="elpagination"
    ></el-pagination>
  </div>
</template>

<script>
import { deleteTag } from "@/utils/utils.js";

export default {
  props: {
    chainType: {
      type: String,
      default: "", // 产业技术链调用时值为chain，其余沿用旧接口
    },
    formValue: {
      type: Object,
    },
    searchTxt: {
      type: String,
    },
  },
  data() {
    return {
      loading: true,
      ipi: 1,
      ips: 10,
      total: 0,
      resultData: [],
      emptyText: "数据加载中...",
      scrollOps: {
        vuescroll: {
          mode: "native",
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: "rgba(255,255,255,.1)",
          gutterOfEnds: "10px",
        },
        bar: {
          background: "#c7c8ca",
          size: "8px",
        },
      },
    };
  },
  mounted() {
    if (this.$route.query.ipi) {
      this.ipi = Number(this.$route.query.ipi);
    }
    this.search(this.formValue, this.ipi);
  },
  watch: {
    formValue: {
      handler(newVal) {
        this.search(newVal, 1);
      },
      deep: true,
    },
  },
  methods: {
    numFormat(num) {
      var res = num.toString().replace(/\d+/, function(n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
          return $1 + ",";
        });
      });
      return res;
    },
    search(formValue, ipi) {
      this.ipi = ipi;
      this.loading = true;
      this.emptyText = "数据加载中...";
      if (this.chainType == "chain") {
        this.$post(this.$Url.chain.enterpriseRelNews, {
          ...formValue,
          // name: "",
          // eid: "",
          page: ipi,
          limit: this.ips,
          keyword: "",
        })
          .then((res) => {
            this.handleResData(res);
          })
          .catch((e) => {
            this.emptyText = "暂无数据";
          });
        return;
      }
      this.$post(this.$Url.company.listPage, {
        ipi: this.ipi,
        ips: this.ips,
        isTermsAgg: false, // 是否聚合
        name: this.searchTxt,
        ...formValue,
      })
        .then((res) => {
          this.handleResData(res);
        })
        .catch((e) => {
          this.emptyText = "暂无数据";
        });
    },
    handleResData(res) {
      let data = res.data;
      this.loading = false;
      this.resultData = [];
      this.total = data.total;
      if (data.result.length && data.result.length > 0) {
        data.result.forEach((i, index) => {
          let newName = i.name.replace(/[<em>|</em>]/g, "");
          this.resultData.push({
            eid: i.eid,
            name: newName,
            name_wordlight: i.name,
            pingfen: i.pingfen,
            isCollection: i.isCollection,
            collectionId: i.collectionId,
          });
          this.getList(newName, this.resultData[index]);
          this.getLogo(i.eid, this.resultData[index]);
          this.getAddress(i.eid, this.resultData[index]);
          // this.Label(newName, this.resultData[index]);
          // this.isCollect(i.eid, this.resultData[index]);
          // this.getScienceScore(i.name, this.resultData[index])
        });
      } else {
        this.emptyText = "暂无数据";
      }
    },
    // 获取eid
    getList(name, sth) {
      this.$post(this.$Url.search.companyList, {
        name: name,
        ipi: 1,
        ips: 1,
      }).then((res) => {
        if (res.data) {
          let source =
            res.data.result.length > 0 && res.data.result[0]["_source"];
          this.$set(sth, "_source", source);
        }
      });
    },
    // 获取公司logo
    getLogo(eid, sth) {
      this.$get(this.$Url.search.companyLogo, {
        eid: eid,
      }).then((res) => {
        if (res.data) {
          let img = res.data !== "" ? res.data : "none";
          this.$set(sth, "logImg", img);
        }
      });
    },
    // 获取科技创新指数
    getScienceScore(companyName, sth) {
      this.$get(this.$Url.company.basicInfo, {
        companyName,
        dataType: "patentScore",
      }).then((res) => {
        let data = res.data;
        this.$set(sth, "scienceScores", data.patentScore || 0);
        // this.scienceScores = data.data.patentScore || 0;
        // this.$set(this.scoreArr, 0, true);
      });
    },
    //  标签
    Label(companyName, sth) {
      this.$get(this.$Url.company.labelByName, {
        companyName: companyName,
      }).then((res) => {
        let label = res.data || [];
        this.$set(sth, "label", label);
      });
    },
    // 是否收藏
    // isCollect(eid, sth) {
    //   this.$get(this.$Url.company.isCollect2, {
    //     eid,
    //   }).then((res) => {
    //     let data = res.data;
    //     this.$set(sth, "isCollect", data);
    //   });
    // },
    // 获取地址
    getAddress(eid, sth) {
      // /company/address?eid=
      this.$get(this.$Url.company.address, {
        eid: eid,
      }).then((res) => {
        if (res.data) {
          let address = (res.data[0] && res.data[0].address) || "";
          this.$set(sth, "address", address);
        }
      });
    },
    // 在进入企业详情之前，先判断后台是否生成数据
    goDetail(name) {
      // debugger
      localStorage.setItem(
        "enterpriseBack",
        JSON.stringify({
          name: "EISearchResult",
          query: {
            keyword: this.searchTxt,
            ipi: this.ipi,
          },
        })
      );
      let newName = name.replace(/[<em>|</em>]/g, "");
      this.$Bus.$emit("progressBar", newName);
    },
    handleCollect(item, index) {
      if (item.isCollection) {
        this.$confirm("您确定取消收藏吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$delete(
            `${this.$Url.collect.collectionDelete}/${item.collectionId}`,
            {}
          ).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功！",
            });
            this.$set(this.resultData[index], "isCollection", false);
          });
        });
      } else {
        const param = {
          title: item.name,
          sourceId: item.eid,
          sourceType: "COMPANY",
        };
        param.title = deleteTag(param.title);
        param.userId = JSON.parse(localStorage.getItem("homeUserInfo")).id;
        this.$post(this.$Url.collect.collectionAdd, param).then((res) => {
          this.$message({
            type: "success",
            message: "收藏成功！",
          });
          this.$set(this.resultData[index], "isCollection", true);
          this.$set(this.resultData[index], "collectionId", res.data);
        });
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.ipi = val;
      if (this.chainType != "chain") {
        this.$router.push({
          name: "EISearchResult",
          query: {
            keyword: this.searchTxt,
            ipi: this.ipi,
          },
        });
      }
      this.search(this.formValue, val);
    },
  },
  watch: {
    ipi() {},
  },
};
</script>

<style lang="scss" scoped>
.result-con {
  flex: auto;
  overflow: hidden;
  padding: 0.06rem 0.28rem 0.03rem 0.5rem;
  display: flex;
  flex-direction: column;
  background: #f6f7fb;
  .result-total {
    color: #838698;
    font-size: 0.14rem;
    line-height: 0.52rem;
    flex: none;
  }
  .scroll-ul {
    flex: auto;
    .ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-right: 0.24rem;
      > li {
        width: calc(50% - 0.22rem);
        height: 1.82rem;
        background: #fff;
        margin-bottom: 0.18rem;
        padding: 0 0.2rem 0 0.16rem;
        overflow: hidden;
        border-radius: 0.08rem;
        box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
        .li-title {
          width: 100%;
          height: 0.46rem;
          line-height: 0.46rem;
          border-bottom: 1px solid #f7f7f7;
          margin-bottom: 0.13rem;
          .name {
            width: 75%;
            float: left;
            color: #3e4051;
            font-size: 0.2rem;
            font-weight: normal;
            p {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              ::v-deep em {
                color: $mainColor;
              }
              &:hover {
                font-weight: bold;
                // color: $mainColor;
              }
              i {
                display: inline-block;
                margin-right: 0.1rem;
                background-image: linear-gradient(50deg, $color55, $mainColor);
                background-clip: text;
                color: transparent;
              }
            }
          }
          .li-button {
            float: right;
            color: #9a9b9e;
            font-size: 0.18rem;
            cursor: default;
            .collect {
              cursor: pointer;
              margin-right: 10px;
            }
            .el-icon-star-on {
              color: $color120;
              font-size: 0.2rem;
            }
            .score {
              font-size: 0.15rem;
            }
          }
        }
        .li-content {
          width: 100%;
          display: flex;
          .img {
            flex: none;
            width: 1.1rem;
            height: 1.1rem;
            border: 0.06rem solid #eeeff6;
            border-radius: 0.04rem;
            margin-right: 0.28rem;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              max-width: 100%;
              max-height: 100%;
              display: block;
              margin: auto;
            }
          }
          .content {
            flex: auto;
            overflow: hidden;
            background-color: transparent;
            .content-label {
              height: 0.2rem;
              overflow: hidden;
              margin-bottom: 0.09rem;
              span {
                display: inline-block;
                max-width: 1rem;
                height: 100%;
                line-height: 0.2rem;
                border-radius: 0.1rem;
                background: #c7f1f6;
                text-align: center;
                padding: 0 0.1rem;
                overflow: hidden;
                margin-right: 0.22rem;
                color: #2fb8c8;
                font-size: 0.12rem;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .content-info {
              display: flex;
              flex-wrap: wrap;
              li {
                width: 50%;
                height: 0.28rem;
                line-height: 0.28rem;
                margin-top: 0.12rem;
                color: #a6a8bc;
                font-size: 0.16rem;
                overflow: hidden;
                padding-right: 0.1rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
                .icon {
                  display: inline-block;
                  height: 100%;
                  width: 0.28rem;
                  line-height: 0.28rem;
                  text-align: center;
                  background: $hoverColor;
                  border-radius: 0.08rem;
                  margin-right: 0.2rem;
                  color: $mainColor;
                }
                .info-title {
                  display: inline-block;
                  width: 1.06rem;
                }
                > a {
                  color: $mainColor;
                }
              }
            }
          }
        }
      }
    }
  }
  .el-pagination.is-background {
    text-align: right;
    font-weight: 700;
    margin: 0.06rem 0 0.24rem 0;
    ::v-deep .el-pager {
      li:not(.disabled).active {
        background: transparent;
        color: $mainColor;
      }
      li {
        color: #c1c6d2;
        font-size: 0.16rem;
        font-weight: 400;
        background: #f6f7fb;
      }
    }
    ::v-deep .btn-prev {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .btn-next {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .el-pagination__jump {
      color: #c1c6d2;
      font-size: 0.16rem;
      .el-input--medium .el-input__inner {
        height: 0.26rem;
        border: 1px solid $mainColor;
        border-radius: 0;
      }
    }
  }
}
.chain-result-con {
  padding: 0;
  .scroll-ul .ul {
    padding-right: 0;
  }
}
</style>
